import React, { useState } from "react";
import './TodoHeader.css';

export default function TodoHeader(props) {
  //input 元素的值的状态
  let [v, setV] = useState('');

  return (
    <div className="todo-header">
      <input 
        type="text" 
        placeholder="请输入你的任务名称，按回车键确认" 
        value={v} 
        onChange={(e) => {
          setV(e.target.value);
        }} 
        // 键盘抬起事件
        onKeyUp={(e) => {
          //判断是否按下了回车键
          if(e.code === "Enter"){
            //判断内容是否为空
            if(v === '') return;
            //调用 addTodo 函数完成新增
            props.addTodo(v);
            //清空 input 输入的内容
            setV('');
          }
        }}
        />
    </div>
  );
}
